<template>
    <div id="login_box">
        <div class="back" @click="back"><i class="el-icon-arrow-left"></i>返回</div>
        <div class="container">
           <div class="btn_wrap">
               <a class="btn btn_register" @click="registerDia">注册</a>
               <a class="btn btn_login" @click="loginDia">登录</a>
           </div>
        </div>
<!--                注册-->
                <div id="register">
                    <register-dia :message="registerVisible"/>
                </div>
<!--                登录-->
                <div>
                    <login-dia :message="loginVisible"/>
                </div>
    </div>
</template>

<script>
    import RegisterDia from "./loginComp/RegisterDia";
    import LoginDia from "./loginComp/LoginDia";
    export default {
        name: "Login",
        components:{
            RegisterDia,
            LoginDia
        },
        data(){
            return {
                registerVisible:false,
                loginVisible:false,
            }
        },
        methods:{
            registerDia(){
                this.registerVisible = !this.registerVisible
            },
            loginDia(){
                this.loginVisible = !this.loginVisible
            },
            back(){
                this.$router.back();
            }
        },
        created() {
            this.$bus.$on('registerDia',this.registerDia);
            this.$bus.$on('loginDia',this.loginDia);
        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/css/login/login_main.css";
    .back{
        position: fixed;
        left: 15px;
        top: 15px;
        font-size: 2rem;
        color: white;
    }
    @media screen and (min-width:1200px) {
        .back{
            font-size: 1.2rem;
        }
    }
</style>